@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-pagination';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 'xs', 's';

$typography: (
  'xs': $sans-label-s,
  's': $sans-label-l,
);

.pageButton {
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;

  color: $sys-neutral-accent-default;
  text-decoration: none;
  text-transform: none;

  background-color: transparent;
  border: 0 solid transparent;
  outline: 0;
  outline-offset: 0;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($pagination, 'page-button', 'container', $size);
      @include composite-var(simple-var($typography, $size));
    }
  }

  &:hover {
    color: $sys-neutral-text-main;
    background-color: $sys-neutral-decor-hovered;
  }

  &:focus-visible {
    @include outline-var($container-focused-s);

    color: $sys-neutral-text-main;
    background-color: $sys-neutral-decor-hovered;
    outline-color: $sys-available-complementary;
  }

  &:active {
    color: $sys-neutral-text-main;
    background-color: $sys-neutral-decor-activated;
  }

  &[data-activated] {
    color: $sys-primary-text-support;
    background-color: $sys-primary-decor-default;

    &:hover {
      color: $sys-primary-text-support;
      background-color: $sys-primary-decor-default;
    }

    &:focus-visible {
      color: $sys-primary-text-support;
      background-color: $sys-primary-decor-hovered;
    }

    &:active {
      color: $sys-primary-text-support;
      background-color: $sys-primary-decor-default;
    }
  }
}
